<template>
  <view>
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>
    <wlk-navbar title="门票详情" navbarType='3'></wlk-navbar>

    <view>
      <u-image :showLoading="true" :src="item.image" width="100%" mode="widthFix"></u-image>
    </view>

    <view>
      {{ item.name }}
    </view>

    <view>
      价格{{ item.price }}
    </view>
    <view>
      old-price {{ item.old_price }}
    </view>
    <view>
      sales {{ item.sales }}
    </view>

    <u-cell-group :border="false" >
      <u-cell
          :border="false"

      >
        <view slot="title" class="wlkflex">
          <view class="step-title wlkflex">
            <view class="mr10">门票</view>
          </view>
          <view class="ml15 price">
            <text>￥{{item.price}}</text><text class="col9">/人</text>
          </view>
        </view>
        <u-number-box
            slot="right-icon"
            v-model="num"
            step="1"
            disabledInput
            :min="0"
            name="num"
            :max="item.num"
        >
        </u-number-box>
      </u-cell>

    </u-cell-group>





    <view class="fixed-buy-btn wd100 wlkflex justify-between">
      <view class="calculate-info wlkflex">
        <block v-if="total_price>0">
          <view class="bz">总价：</view>
          <view class="price">￥{{total_price}}</view>
        </block>
      </view>
      <view class="buy-btn">
        <u-button :customStyle="{
                    fontWeight: 'bold',
                    height:'90rpx'
                }" :color="themeColor" size="large" :disabled="!total_price>0" shape="circle" @click="submit()" text="购买"></u-button>
      </view>
    </view>
  </view>
</template>

<script>
var _self;
import { mapGetters } from 'vuex';
import { cal } from '@/wlkutils/cal'

export default {
  computed: {
    ...mapGetters(['themeColor']),
    total_price() {
      // return 11;
      return cal.cheng(this.item.price,this.num)  ;
    }
  },
  data() {
    return {
      id: '',
      item: {
        'price':0,
      },
      num: 1,
    };
  },
  onLoad(options) {
    _self = this;
    if (options && options.id) {
      this.id = options.id;
      this.getDetail();
    }
  },
  onShow() {

  },
  methods: {
    submit(){

      let query ={};

      query.id = this.id;
      query.num = this.num;

      console.log(query)


      this.$Router.push({
        path: '/pages/ticket/create',
        query: query
      });

    },
    getDetail() {
      uni.$u.http.post('ticket/getDetail', {
        id: this.id,
      }).then(res => {
        this.item = res.data.ticket;
      })
    },
  },
};
</script>

<style lang="scss">
.passenger-content {
  width: 92%;
  padding: 0 30 rpx;
  background-color: #FFFFFF;
  margin: 30 rpx auto 0 auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .02);
}

.wlk-fixed-btn {
  box-shadow: 0px -5px 5px rgba(0, 0, 0, 0);
  background-color: transparent;
}
.fixed-buy-btn{
  position: fixed;
  z-index: 10076;
  padding: 20rpx 30rpx;
  background-color: #FFFFFF;
  bottom: 0;
  box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.1);
  .calculate-info{
    width: 50%;
    font-size: $font-lt;
    .bz{
    }
    .price{
      font-size: $font-max;
      color: $-tour-price-color;
    }
  }
  .buy-btn{
    width: 40%;
  }
}
</style>
